<template>
  <div class="privatePhotosManagement">
    <h3>私照管理</h3>
    <div class="tagList tagList2" v-if="permissions_obj.id_198||permissions_obj.id_all">
      <ul>
        <li
          v-for="(item,index) in channelTagList"
          :key="index"
          :class="[channelActiveIndex==index?'active':'']"
          @click="channelSearchTag(item,index)"
        >{{item}}</li>
      </ul>
    </div>
    <div class="search">
      <div class="cond1 cond">
        <el-input placeholder="请输入私照标题" v-model="search1">
          <template slot="prepend">私照标题</template>
        </el-input>
      </div>
      <div class="cond1 cond">
        <el-input placeholder="请输入私照ID" v-model="search2">
          <template slot="prepend">私照ID</template>
        </el-input>
      </div>
      <div class="cond2 cond">
        <label>付费类型</label>
        <el-select v-model="search3" placeholder="请选择">
          <el-option
            v-for="item in optionsPayType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond2 cond">
        <label>标签状态</label>
        <el-select v-model="search4" placeholder="请选择">
          <el-option
            v-for="item in optionsTagStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond2 cond">
        <label>状态</label>
        <el-select v-model="search5" placeholder="请选择">
          <el-option
            v-for="item in optionsStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>
      <div class="cond2 cond">
        <label>上/下架时间</label>
        <el-date-picker
          v-model="search6"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          value-format="yyyy-MM-dd"
        ></el-date-picker>
      </div>
      <div>
        <el-button type="primary" icon="el-icon-search" @click="searchMethod">搜索</el-button>
      </div>
    </div>
    <div class="opration">
      <el-button type="success" icon="el-icon-plus" @click="addData" v-if="permissions_obj.id_200||permissions_obj.id_all">添加</el-button>
      <el-button type="primary" @click="batchUp" v-if="permissions_obj.id_204||permissions_obj.id_all">批量上架</el-button>
      <el-button type="warning" @click="batchDown" v-if="permissions_obj.id_205||permissions_obj.id_all">批量下架</el-button>
      <el-button type="danger" @click="batchDelete" v-if="permissions_obj.id_206||permissions_obj.id_all">批量删除</el-button>
    </div>
    <div class="list">
      <el-table
        border
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="45" header-align="center" align="center"></el-table-column>
        <el-table-column type="index" width="50" header-align="center" align="center" label="序号"></el-table-column>
        <el-table-column header-align="center" align="center" label="图片" width="100">
          <template slot-scope="scope">
            <div class="left" style="width: 80px; height: 80px">
              <el-image
                style="width: 100px; height: 100px"
                :src="scope.row.images[0]"
                :preview-src-list="scope.row.images"
              ></el-image>
            </div>
          </template>
        </el-table-column>
        <el-table-column header-align="center" align="center" label="私照信息">
          <template slot-scope="scope">
            <div class="vedioBox">
              <div class="right">
                <div>
                  ID：
                  <span>{{scope.row.id}}</span>
                </div>
                <div>
                  标题：
                  <span>{{scope.row.source_title}}</span>
                </div>
                <div>
                  数量：
                  <span>{{scope.row.images_count}}</span>
                </div>
              </div>
            </div>
          </template>
        </el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="source_images_type"
          label="分类"
          width="90"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="paytype_zh"
          label="付费类型"
          width="90"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="like_count"
          label="点赞量"
          width="90"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="pay_count"
          label="购买量"
          width="90"
        ></el-table-column>
        <el-table-column
          header-align="center"
          align="center"
          prop="created_at"
          label="上/下架时间"
          width="90"
        ></el-table-column>
        <el-table-column header-align="center" align="center" label="操作" width="230" fixed="right">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="danger"
              v-show="scope.row.status==1"
              v-if="permissions_obj.id_203||permissions_obj.id_all"
              @click="handleTakeOff(scope.$index, scope.row)"
            >下架</el-button>
            <el-button
              size="mini"
              type="success"
              @click="handleShelves(scope.$index, scope.row)"
              v-show="scope.row.status==0"
              v-if="permissions_obj.id_203||permissions_obj.id_all"
            >上架</el-button>
            <el-button size="mini" type="primary" @click="handleModify(scope.$index, scope.row)" v-if="permissions_obj.id_201||permissions_obj.id_all">修改</el-button>
            <el-button size="mini" type="danger" @click="handleDelete(scope.$index, scope.row)" v-if="permissions_obj.id_202||permissions_obj.id_all">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage1"
        :page-sizes="[10,30,50,100]"
        :page-size="pageSize"
        layout="total, prev, pager, next,sizes,jumper"
        :total="totalSize"
      ></el-pagination>
    </div>
    <!-- //添加编辑私照 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="addDialogVisible"
      width="40%"
      center
      class="dialog"
    >
      <div class="row" v-if="dialogTitle=='私照详情'">
        <span>ID：</span>
        <el-input placeholder="请输入标题" v-model="inputId" clearable disabled></el-input>
      </div>
      <div class="row">
        <span>标题：</span>
        <el-input placeholder="请输入标题" v-model="inputTitle" clearable type="textarea"></el-input>
      </div>
      <div class="row">
        <span>付费类型：</span>
        <el-select v-model="inputPayType" placeholder="请选择">
          <el-option
            v-for="item in optionsDialogPayType"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          ></el-option>
        </el-select>
      </div>

      <div class="row" v-if="inputPayType==2">
        <span>价格：</span>
        <el-input placeholder="请输入钻石价格" v-model="inputDiamondPrice" clearable></el-input>
      </div>
      <div class="row">
        <span>分类：</span>
        <el-input placeholder="请输入分类" v-model="inputCate" clearable></el-input>
      </div>
      <div class="row">
        <span>前几张免费：</span>
        <el-input placeholder="请输入张数" v-model="inputFreeNum" clearable type="number"></el-input>
      </div>
      <div class="row">
        <span>私照：</span>
        <el-upload
          :action="imgUploadParth"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="imgUploadSuccess"
          :on-error="imgUploadFailure"
          :file-list="fileList"
          multiple
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible" append-to-body>
          <img width="100%" :src="dialogImageUrl" alt />
        </el-dialog>
      </div>
      <div class="dialogBtn">
        <el-button type="primary" size="small" @click="submitModifyEditor">提交</el-button>
        <el-button type="info" size="small" @click="cancelModifyEditor">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import md5 from "js-md5";
export default {
  name: "privatePhotosManagement",
  data() {
    return {
      channelTagList: [],
      channelActiveIndex: 0,
      channelActiveText: "",
      search1: "",
      search2: "",
      search3: "",
      search4: "",
      search5: "",
      search6: "",
      optionsPayType: [
        {
          value: "",
          label: "全部"
        },
        {
          value: 1,
          label: "VIP"
        },
        {
          value: 2,
          label: "钻石"
        },
        {
          value: 3,
          label: "免费"
        }
      ],
      optionsTagStatus: [
        {
          value: "",
          label: "全部"
        },
        {
          value: 1,
          label: "有标签"
        },
        {
          value: 2,
          label: "无标签"
        }
      ],
      optionsStatus: [
        {
          value: "",
          label: "全部"
        },
         {
          value: 0,
          label: "下架"
        },
        {
          value: 1,
          label: "上架"
        },
       
    
      ],
      optionsDialogPayType: [
        {
          value: 1,
          label: "VIP"
        },
        {
          value: 2,
          label: "钻石"
        },
        {
          value: 3,
          label: "免费"
        }
      ],
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            }
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            }
          }
        ]
      },
      currentPage1: 1,
      pageSize: 10,
      totalSize: 0,
      //多选框选中的值
      multipleSelection: [],
      initData: {},
      dialogTitle: "添加私照",
      addDialogVisible: false,
      //弹窗输入框
      inputId: "",
      inputTitle: "",
      inputPayType: "",
      inputDiamondPrice: "",
      inputCate: "",
      inputFreeNum: "",
      //图片上传成功返回地址
      uploadImg: "",
      //图片上传接口地址
      imgUploadParth: "",
      fileList: [],
      images: [],
      //提交时，传给后台的图片列表
      uploadImgList: [],
      //图片预览
      dialogVisible: false,
      //图片预览列表
      dialogImageUrl: [],
      tableData: [],
      selectId: "",
      // 权限管理
      permissions: [],
      permissions_obj: {}
    };
  },
   created() {
    //权限判断
    this.permissions = this.$store.state.permissions;
    let oneOff = false;
    this.permissions.forEach((item, index) => {
      if (item == -1) {
        oneOff = true;
      } else {
        this.permissions_obj["id_" + item] = item;
      }
    });
    if (oneOff) {
      this.permissions_obj.id_all = true;
    } else {
      this.permissions_obj.id_all = false;
    }
  },
  mounted() {
    this.getFileUploadParth();
    this.getChannelList();
  },
  methods: {
    //表格图片预览
    imgView(url) {
      this.imgDialogVisible = true;
      this.imgPreview = url;
    },
    //   分类标签搜索
    channelSearchTag(item, index) {
      this.channelActiveIndex = index;
      this.channelActiveText = item;
      this.getInitData();
    },
    //获取分类标签
    async getChannelList() {
      let parames = {
        handshake: "",
        data: {}
      };
      let res = await this.$axios.post(
        this.$api.spiderimageTypes,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.channelTagList = res.data;
        this.channelTagList.unshift("全部");
        this.channelActiveText = this.channelTagList[0];
        this.getInitData();
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    // 分页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage1 = val;
      this.getInitData();
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.getInitData();
    },
    //多选框选中
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //搜索
    searchMethod() {
      this.currentPage1 = 1;
      this.getInitData();
    },
    //添加
    addData() {
      this.dialogTitle = "添加私照";
      this.addDialogVisible = true;
      this.fileList = [];
      this.inputId = "";
      this.inputTitle = "";
      this.inputPayType = "";
      this.inputDiamondPrice = "";
      this.inputCate = "";
      this.inputFreeNum = "";
    },
    //批量上架
    async batchUp() {
      if (this.multipleSelection.length < 1) {
        this.$message({
          message: "至少选择一项",
          type: "warning"
        });
        return;
      }
      let idList = [];
      this.multipleSelection.forEach((item, index) => {
        idList.push(item.id);
      });
      let parames = {
        handshake: "",
        data: {
          ids: idList.join(",")
        }
      };
      let res = await this.$axios.post(
        this.$api.spiderimageSet_status_up,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success"
        });
        this.getInitData();
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //批量下架
    async batchDown() {
      if (this.multipleSelection.length < 1) {
        this.$message({
          message: "至少选择一项",
          type: "warning"
        });
        return;
      }
      let idList = [];
      this.multipleSelection.forEach((item, index) => {
        idList.push(item.id);
      });
      let parames = {
        handshake: "",
        data: {
          ids: idList.join(",")
        }
      };
      let res = await this.$axios.post(
        this.$api.spiderimageSet_status_down,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success"
        });
        this.getInitData();
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //批量删除
    async batchDelete() {
      if (this.multipleSelection.length < 1) {
        this.$message({
          message: "至少选择一项",
          type: "warning"
        });
        return;
      }
      let idList = [];
      this.multipleSelection.forEach((item, index) => {
        idList.push(item.id);
      });
      let parames = {
        handshake: "",
        data: {
          ids: idList.join(",")
        }
      };
      let res = await this.$axios.post(
        this.$api.spiderimageDelete_more,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success"
        });
        this.getInitData();
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //下架
    handleTakeOff(index, row) {
      this.selectId = row.id;
      this.$confirm("是否继续该操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.statusMethod(0);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消该操作"
          });
        });
    },
    //上架
    handleShelves(index, row) {
      this.selectId = row.id;
      this.$confirm("是否继续该操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.statusMethod(1);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消该操作"
          });
        });
    },
    //上/下架接口
    async statusMethod(status) {
      let parames = {
        handshake: "",
        data: {
          id: this.selectId,
          status: status
        }
      };
      let res = await this.$axios.post(
        this.$api.spiderimageSet_status,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success"
        });
        this.getInitData();
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //修改
    handleModify(index, row) {
      this.fileList = [];
      this.dialogTitle = "私照详情";
      this.addDialogVisible = true;
      this.inputId = row.id;
      this.inputTitle = row.source_title;
      this.inputPayType = row.paytype;
      this.inputDiamondPrice = row.coins;
      this.inputCate = row.source_images_type;
      this.inputFreeNum = row.free_count;
      row.images.forEach((item, index) => {
        this.fileList.push({
          name: index,
          url: item
        });
      });
    },
    //删除
    handleDelete(index, row) {
      this.selectId = row.id;
      this.$confirm("是否继续该操作?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteMethod();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消该操作"
          });
        });
    },
    async deleteMethod() {
      let parames = {
        handshake: "",
        data: {
          id: this.selectId
        }
      };
      let res = await this.$axios.post(
        this.$api.spiderimageDelete,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success"
        });
        this.getInitData();
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //获取初始化数据列表
    async getInitData() {
      let parames = {
        handshake: "",
        data: {
          page: this.currentPage1,
          page_size: this.pageSize,
          search: {
            source_title: this.search1,
            id: this.search2,
            paytype: this.search3,
            is_type: this.search4,
            status: this.search5,
            stime:
              this.search6 && this.search6.length > 0 ? this.search6[0] : "",
            otime:
              this.search6 && this.search6.length > 1 ? this.search6[1] : "",
            source_images_type:
              this.channelActiveText == "全部" ? "" : this.channelActiveText
          }
        }
      };
      let res = await this.$axios.post(
        this.$api.spiderimageLists,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.initData = res.data;
        this.totalSize = this.initData.total;
        this.tableData = this.initData.data;
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //图片上传成功
    imgUploadSuccess(response, file, fileList) {
      this.$message({
        message: "上传成功",
        type: "success"
      });
      this.uploadImg = response.result.file_path;
      this.images = fileList;
    },
    //图片上传失败
    imgUploadFailure(err, file, fileList) {
      this.$message({
        message: "上传失败",
        type: "warning"
      });
    },
    //图片预览
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      this.images = fileList;
    },
    //获取文件上传地址
    async getFileUploadParth() {
      let parames = {
        handshake: "",
        data: {}
      };
      let res = await this.$axios.post(
        this.$api.uploadGet_domain,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        let timestamp = parseInt(new Date().getTime() / 1000);
        let platform = "P";
        let secret = "Z6Kbz8hpT9VtGmcu";
        let sign = md5(platform + timestamp + secret).toUpperCase();
        this.imgUploadParth =
          res.data.url +
          "?dir=images&platform=P&timestamp=" +
          timestamp +
          "&sign=" +
          sign;
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    //提交
    submitModifyEditor() {
      if (this.dialogTitle == "添加私照") {
        this.addMethod();
      } else {
        this.modifyMethod();
      }
    },
    cancelModifyEditor() {
      this.addDialogVisible = false;
    },
    async addMethod() {
      // console.log(this.fileList);
      if (this.inputFreeNum<0) {
        this.$message({
          message: "请填写正确的张数",
          type: "warning"
        });
        return;
      }
      let images = [];
      this.images.forEach((item, index) => {
        images.push(item.response.result.file_path);
      });
      let parames = {
        handshake: "",
        data: {
          source_title: this.inputTitle,
          paytype: this.inputPayType,
          coins: this.inputPayType==2?this.inputDiamondPrice:0,
          source_images_type: this.inputCate,
          free_count: this.inputFreeNum,
          images: images.join(",")
        }
      };
      let res = await this.$axios.post(
        this.$api.spiderimageAdd,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success"
        });
        this.getInitData();
        this.addDialogVisible = false;
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    },
    async modifyMethod() {
      // console.log(this.fileList);
      // console.log(this.images);
      if (this.inputFreeNum < 0) {
        this.$message({
          message: "请填写正确的张数",
          type: "warning"
        });
        return;
      }
      let images = [];
      this.images.forEach((item, index) => {
        if (item.response) {
          images.push(item.response.result.file_path);
        } else if (item.url) {
          let index = item.url.indexOf("ig");
          let newUrl = "";
          if (index) {
            newUrl = item.url.substring(index);
            let _ind = newUrl.indexOf(".", -1);
            if (_ind) {
              newUrl = newUrl.substring(0, _ind);
              newUrl = "/" + newUrl + ".ceb";
            }
          }
          images.push(newUrl);
        }
      });
      let parames = {
        handshake: "",
        data: {
          id: this.inputId,
          source_title: this.inputTitle,
          paytype: this.inputPayType,
          coins: this.inputPayType==2?this.inputDiamondPrice:0,
          source_images_type: this.inputCate,
          free_count: this.inputFreeNum,
          images: images.join(",")
        }
      };
      let res = await this.$axios.post(
        this.$api.spiderimageUpdate,
        JSON.stringify(parames)
      );
      if (res.code == 200) {
        this.$message({
          message: res.message,
          type: "success"
        });
        this.getInitData();
        this.addDialogVisible = false;
      } else {
        this.$message({
          message: res.message,
          type: "warning"
        });
      }
    }
  }
};
</script>
<style scoped>
.privatePhotosManagement {
  padding-bottom: 0.2rem;
}
.tagList {
  width: 1.4rem;
}
.tagList ul {
  display: flex;
  align-items: center;
  width: 100%;
}
.tagList li {
  background: rgb(26, 153, 226);
  color: #fff;
  cursor: pointer;
  height: 0.4rem;
  width: 0.7rem;
  text-align: center;
  line-height: 0.4rem;
  margin-bottom: 0.1rem;
}
.tagList li:hover {
  background: rgb(52, 169, 236);
}
.tagList .active {
  background: rgb(52, 169, 236);
}
.tagList2 {
  width: 100%;
  padding: 0 0.2rem;
  margin-bottom: 0.2rem;
}
.tagList2 ul {
  flex-wrap: wrap;
}
.tagList2 li {
  border-radius: 3px;
  margin-right: 0.1rem;
  height: 0.3rem;
  line-height: 0.3rem;
  width: auto;
  padding: 0px 10px;
  display: flex;
  background: rgb(26, 213, 226);
}
.tagList2 li:hover {
  background: rgb(25, 168, 179);
}
.tagList2 .active {
  background: rgb(25, 168, 179);
}

h3 {
  padding: 0.2rem;
  color: #3c763d;
}
.search {
  display: flex;
  margin-top: 0.2rem;
  padding-left: 0.2rem;
  width: 100%;
  flex-wrap: wrap;
}
.el-input {
  width: 2.5rem;
}
.search label {
  width: 0.83rem;
  height: 0.4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f5f7fa;
  color: #909399;
  border: 1px solid #dcdfe6;
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px;
  font-size: 14px;
}
.cond {
  display: flex;
  margin-right: 0.4rem;
  margin-bottom: 0.1rem;
}
.search .el-select >>> .el-input__inner {
  border-left: none;
  border-top-left-radius: 0px;
  border-bottom-left-radius: 0px;
}
.search .el-select {
  width: 1.67rem;
}
.opration {
  margin-top: 0.2rem;
  padding-left: 0.2rem;
}
.page {
  margin-top: 0.2rem;
  display: flex;
  justify-content: center;
}
.list {
  margin-top: 0.2rem;
  padding: 0 0.1rem;
  font-size: 0.12rem;
}
.dialogBtn {
  display: flex;
  justify-content: center;
  margin-top: 0.3rem;
}
.row {
  margin-bottom: 0.1rem;
  display: flex;
  align-items: center;
}
.row span {
  width: 1rem;
  display: block;
}
.row >>> .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.row >>> .avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.row >>> .avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.row >>> .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-checkbox-group {
  width: 90%;
}
.vedioBox {
  display: flex;
  align-items: center;
}
.vedioBox .right {
  display: flex;
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  padding-left: 0.05rem;
}
.vedioBox .right span {
  color: rgb(19, 141, 150);
}
.el-button {
  margin-bottom: 10px;
}
.dialog .el-input {
  width: 100%;
}
.playList {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.15rem;
}
</style>